<template>
	<div class="wrapper">
		<div class="switchTitle">
			<Button class="switchButton" type="primary">保存</Button>
			<Button class="switchButton" @click="preview">预览</Button>
			<span class="switchClose" @click="$router.push({path:'/ui/ui-design'})">
				<Icon type="ios-close" size="32" />
			</span>
		</div>
		<div class="mainContent">
			<div class="flexContent">
				<div class="flexContentLeft">
					<div class="switchTitle">
						<ul class="mainContentUl">
							<li class="mainContentTitle">
								<span @click="openSplit = true ">界面分割</span>
								<splitModal v-model="openSplit" @changeVal="changeVal"></splitModal>
							</li>
							<li class="mainContentTitle" @click="addRow('cell')">
								<span>增行</span>
							</li>
							<li class="mainContentTitle" @click="delRow('cell')">
								<span>删行</span>
							</li>
							<li class="mainContentTitle" @click="addCol('cell')">
								<span>增列</span>
							</li>
							<li class="mainContentTitle" @click="delCol('cell')">
								<span>删列</span>
							</li>
							<li class="mainContentTitle" @click="mergeClick">
								<span>合并</span>
							</li>
							<li class="mainContentTitle" @click="splitClick">
								<span>拆分</span>
							</li>
							<li class="mainContentTitle">
								<span @click="openClick('openWh')">行高</span>
							</li>
							<li class="mainContentTitle">
								<span @click="openClick('openWh1')">列宽</span>
							</li>
							<design-wh v-model="openWh" @changeVal="changeVal1" pattern="row" title="行高"></design-wh>
							<design-wh v-model="openWh1" @changeVal="changeVal1" pattern="col" title="列宽"></design-wh>
						</ul>
					</div>
					<div ref="designBoard" class="designBoard designBoardPosition">
						<Scroll
							ref="ivScroll1"
							class="ivScroll1"
							:height="scrollHeight1"
							:class="{scrollMain:scrollMain1}"
						>
							<div ref="designBoardMain" id="designItem">
								<!-- 行合并 -->
								<Row
									type="flex"
									v-if="(item1.merge&&item1.mergeData.copy)|(!item1.merge)"
									:key="item1"
									v-for="(item1,index1) in pagesEl"
									class="designRow"
									:style="{width:item1.width,height:item1.height}"
								>
									<Col class="designTr" v-if="item1.merge&&item1.mergeData.copy">
										<Col
											class="designFlex"
											v-if="((item2.mergeData.copy|(!item2.mergeData.copy))&&(item2.merge&&item2.mergeData.copyCol))|((item2.mergeData.copy|(!item2.mergeData.copy))&&(!item2.merge))&& colTest(item1,index1,index2,item2).value"
											v-for="(item2,index2) in item1.children"
											:style="{width: colTest(item1,index1,index2,item2).width,height:item2.height}"
										>
											<Col class="designTd" v-if="item2.mergeData.copy" ref="colMerge">
												<Col
													ref="colItem"
													class="designCol"
													:class="{designChioce:designChioce==(index1+'--'+index2)}"
													:style="{width:'100%',height:'100%'}"
													@click.native="choiceClick(item2.content,index1,index2,$event)"
													@mousemove.native="_move(item2.content,index1,index2)"
													@mousedown.native="_mousedown(item2.content,index1,index2,$event)"
													@mouseup.native="_mouseup(item2.content,index1,index2,$event)"
												>
													<div ref="colItemChild" class="designBoardAb designBoardHtml" v-html="item2.content"></div>
												</Col>
											</Col>
											<Col v-if="!(item2.mergeData.copy)" class="mergeCol designTd" ref="colMerge">
												<Row type="flex" class="mergeRow" v-for="index3 in item1.mergeData.num">
													<Col
														v-if="pagesEl[index1+index3-1].children[index2].merge"
														:style="{width:'100%',height:'100%'}"
													>
														<Col
															ref="colItem"
															class="designCol"
															:class="{designChioce:designChioce==((index1+index3-1)+'--'+index2)}"
															:style="{width:'100%',height:'100%'}"
															@click.native="choiceClick(pagesEl[index1+index3-1].children[index2].content,(index1+index3-1),index2,$event)"
															@mousemove.native="_move(pagesEl[index1+index3-1].children[index2].content,(index1+index3-1),index2)"
															@mousedown.native="_mousedown(pagesEl[index1+index3-1].children[index2].content,(index1+index3-1),index2,$event)"
															@mouseup.native="_mouseup(pagesEl[index1+index3-1].children[index2].content,(index1+index3-1),index2,$event)"
														>
															<div
																ref="colItemChild"
																class="designBoardAb designBoardHtml"
																v-html="pagesEl[index1+index3-1].children[index2].content"
															></div>
														</Col>
													</Col>
													<Col
														v-if="!pagesEl[index1+index3-1].children[index2].merge"
														:style="{width:'100%',height:'100%',display:'flex'}"
													>
														<Col
															v-if="pagesEl[index1+index3-1].children[index2].mergeData.num"
															ref="colItem"
															class="designCol"
															v-for="index4 in pagesEl[index1+index3-1].children[index2].mergeData.num"
															:class="{designChioce:designChioce==((index1+index3-1)+'--'+(index2+index4-1))}"
															:style="{height:'100%',flex:1}"
															@click.native="choiceClick(pagesEl[index1+index3-1].children[(index2+index4-1)].content,(index1+index3-1),(index2+index4-1),$event)"
															@mousemove.native="_move(pagesEl[index1+index3-1].children[(index2+index4-1)].content,(index1+index3-1),(index2+index4-1))"
															@mousedown.native="_mousedown(pagesEl[index1+index3-1].children[(index2+index4-1)].content,(index1+index3-1),(index2+index4-1),$event)"
															@mouseup.native="_mouseup(pagesEl[index1+index3-1].children[(index2+index4-1)].content,(index1+index3-1),(index2+index4-1),$event)"
														>
															<div
																ref="colItemChild"
																class="designBoardAb designBoardHtml"
																v-html="pagesEl[index1+index3-1].children[index2].content"
															></div>
														</Col>
														<Col
															v-if="!pagesEl[index1+index3-1].children[index2].mergeData.num"
															ref="colItem"
															class="designCol"
															:class="{designChioce:designChioce==((index1+index3-1)+'--'+(index2))}"
															v-for="index5 in colTest(item1,index1,index2,item2).num"
															:style="{width:getWidth(colTest(item1,index1,index2,item2).width,pagesEl[index1+index3-1].children[(index2+index5-1)].width),height:'100%'}"
															@click.native="choiceClick(pagesEl[index1+index3-1].children[(index2+index5-1)].content,(index1+index3-1),+(index2+index5-1),$event)"
															@mousemove.native="_move(pagesEl[index1+index3-1].children[(index2+index5-1)].content,(index1+index3-1),+(index2+index5-1))"
															@mousedown.native="_mousedown(pagesEl[index1+index3-1].children[(index2+index5-1)].content,(index1+index3-1),+(index2+index5-1),$event)"
															@mouseup.native="_mouseup(pagesEl[index1+index3-1].children[(index2+index5-1)].content,(index1+index3-1),+(index2+index5-1),$event)"
														>
															<div
																ref="colItemChild"
																class="designBoardAb designBoardHtml"
																v-html="pagesEl[index1+index3-1].children[index2+index5-1].content"
															></div>
														</Col>
													</Col>
												</Row>
											</Col>
										</Col>
									</Col>
									<!-- 行未合并 -->
									<Col class="designTr" v-if="!item1.merge">
										<Col
											v-if="(item2.merge&&item2.mergeData.copyCol)|(!item2.merge)"
											v-for="(item2,index2) in item1.children"
											:style="{width:item2.width,height:item2.height}"
										>
											<!--列合并  -->
											<Col
												v-if="item2.merge&&item2.mergeData.copyCol"
												:key="item2"
												ref="colItem"
												class="designCol"
												:class="{designChioce:designChioce==(index1+'--'+index2)}"
												:style="{width:'100%',height:'100%'}"
												@click.native="choiceClick(item2.content,index1,index2,$event)"
												@mousemove.native="_move(item2.content,index1,index2)"
												@mousedown.native="_mousedown(item2.content,index1,index2,$event)"
												@mouseup.native="_mouseup(item2.content,index1,index2,$event)"
											>
												<div ref="colItemChild" class="designBoardAb designBoardHtml" v-html="item2.content"></div>
											</Col>
											<!--列未合并  -->
											<Col
												v-if="!(item2.merge)"
												:key="item2"
												ref="colItem"
												class="designCol"
												:class="{designChioce:designChioce==(index1+'--'+index2)}"
												:style="{width:'100%',height:'100%'}"
												@click.native="choiceClick(item2.content,index1,index2,$event)"
												@mousemove.native="_move(item2.content,index1,index2)"
												@mousedown.native="_mousedown(item2.content,index1,index2,$event)"
												@mouseup.native="_mouseup(item2.content,index1,index2,$event)"
											>
												<div ref="colItemChild" class="designBoardAb designBoardHtml" v-html="item2.content"></div>
											</Col>
										</Col>
									</Col>
								</Row>
							</div>
						</Scroll>
					</div>
				</div>
				<div class="flexContentRight">
					<div class="switchTitle">
						<ul class="mainContentUl">
							<li class="mainContentTitle">
								<span>栏目内容</span>
							</li>
						</ul>
					</div>
					<div
						class="designBoard split-atrr"
						ref="leftSplit"
						@mousemove="scrollHeightChange(1)"
						@mouseout="scrollHeightChange(2)"
					>
						<Scroll ref="ivScroll" :height="scrollHeight" :class="{scrollMain:scrollMain}">
							<ul class="mainContentUl mainContentUl1" ref="contentScroll">
								<li
									class="mainContentTitle mainContentTitle1"
									v-for=" (item,index) in contentEl"
									:key="index"
									@mousemove="_moveContent(item.content)"
									@mousedown="_mouseDownContent(item.content)"
									@mouseup="_mouseUpContent(item.content,'right')"
								>
									<div class="designBoardAb designborder" v-html="item.content"></div>
								</li>
							</ul>
						</Scroll>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import splitModal from '@/views/ui/ui-design/ui-design-split.vue'
import designWh from '@/views/ui/ui-design/design-wh-modal.vue'
export default {
	name: 'ui-design-board1',
	components: { splitModal, designWh },
	props: {},
	data() {
		return {
			openWh1: false, //是否打开 行高 列宽
			openWh: false, //是否打开 行高 列宽
			cell: [], //保存信息
			designChioce: null, //选择
			position: null, //左右拖拽 区分
			scrollHeight: '100%', //默认滚动条高度
			scrollHeight1: '100%',
			scrollMain: true, //是否 显示
			scrollMain1: false, //是否 显示
			designBoardHtml: null, //  designBoardHtml 是否显示
			openSplit: false, //是否打开 界面分割
			getEl: '', //保存 获取 拖拽值
			setEl: '', //设置目标值
			pagesEl: [
				{
					name: 'row',
					width: '100%',
					height: '40%',
					merge: true, //未合并
					mergeData: {
						num: 2,
						copy: true,
						copyCol: false,
						width: '100%',
						height: '20%',
						serial: function (e) {
							return e
						},
						save: [],
					},
					content: '1<div>1</div>',
					children: [
						{
							name: 'Col',
							sign: true,
							width: '20%',
							height: '100%',
							merge: false, //未合并
							mergeData: {
								num: 0,
								copy: true,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							content: '1',
						},
						{
							name: 'Col',
							sign: true,
							width: '20%',
							merge: false, //未合并
							height: '100%',
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							content: '2',
						},
						{
							name: 'Col',
							merge: false, //未合并
							width: '20%',
							mergeData: {
								num: 0,
								copy: false,
								sign: true,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							height: '100%',
							content: '3',
						},
						{
							merge: false, //未合并
							name: 'Col',
							sign: true,
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							width: '20%',
							height: '100%',
							content: '4',
						},
					],
				},
				{
					name: 'row',
					width: '100%',
					height: '20%',
					merge: true, //未合并
					mergeData: {
						num: 2,
						copy: false,
						copyCol: false,
						width: '100%',
						height: '20%',
						save: [],
						serial: function (e) {
							return e
						},
					},
					content: '<div>2</div>',
					children: [
						{
							merge: false, //未合并
							name: 'Col',
							sign: true,
							width: '20%',
							height: '100%',
							mergeData: {
								num: 0,
								copy: true,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							content: 'd',
						},
						{
							merge: false, //未合并
							name: 'Col',
							sign: true,
							width: '20%',
							height: '100%',
							mergeData: {
								num: 0,
								copy: true,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							content: 'c',
						},
						{
							merge: false, //未合并
							name: 'Col',
							sign: true,
							width: '20%',
							mergeData: {
								num: 0,
								copy: true,
								width: '100%',
								height: '20%',
								copyCol: false,
								serial: function (e) {
									return e
								},
								save: [],
							},
							height: '100%',
							content: 'b',
						},
						{
							mergeData: {
								num: 0,
								copy: true,
								copyCol: false,
								sign: true,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							merge: false, //未合并
							name: 'Col',
							sign: true,
							width: '20%',
							height: '100%',
							content: 'a',
						},
					],
				},
				{
					name: 'row',
					width: '100%',
					height: '20%',
					merge: false, //未合并
					mergeData: {
						num: 0,
						copy: false,
						copyCol: false,
						width: '100%',
						height: '20%',
						serial: function (e) {
							return e
						},
						save: [],
					},
					content: '1<div>1</div>',
					children: [
						{
							name: 'Col',
							width: '20%',
							height: '100%',
							merge: false, //未合并
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							content: '1',
						},
						{
							name: 'Col',
							width: '20%',
							merge: false, //未合并
							height: '100%',
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							content: '2',
						},
						{
							name: 'Col',
							merge: false, //未合并
							width: '20%',
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							height: '100%',
							content: '3',
						},
						{
							merge: false, //未合并
							name: 'Col',
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							width: '20%',
							height: '100%',
							content: '4',
						},
					],
				},
				{
					name: 'row',
					width: '100%',
					height: '20%',
					merge: false, //未合并
					mergeData: {
						num: 0,
						copy: false,
						copyCol: false,
						save: [],
					},
					content: '<div>2</div>',
					children: [
						{
							merge: false, //未合并
							name: 'Col',
							width: '20%',
							height: '100%',
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							content: 'd',
						},
						{
							merge: false, //未合并
							name: 'Col',
							width: '20%',
							height: '100%',
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							content: 'c',
						},
						{
							merge: false, //未合并
							name: 'Col',
							width: '20%',
							mergeData: {
								num: 0,
								copy: false,
								copyCol: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							height: '100%',
							content: 'b',
						},
						{
							mergeData: {
								num: 0,
								copy: false,
								width: '100%',
								height: '20%',
								serial: function (e) {
									return e
								},
								save: [],
							},
							merge: false, //未合并
							name: 'Col',
							copyCol: false,
							width: '20%',
							height: '100%',
							content: 'a',
						},
					],
				},
			],
			contentEl: [
				{
					name: 'html1',
					content: 'html1',
				},
				{
					name: 'html2',
					content: 'html2',
				},
				{
					name: 'html3',
					content: 'html3',
				},
				{
					name: 'html4',
					content: 'html4',
				},
				{
					name: 'html4',
					content: 'html5',
				},
				{
					name: 'html1',
					content: 'html1',
				},
				{
					name: 'html2',
					content: 'html2',
				},
				{
					name: 'html3',
					content: 'html3',
				},
				{
					name: 'html4',
					content: 'html4',
				},
				{
					name: 'html4',
					content: 'html5',
				},
				{
					name: 'html1',
					content: 'html1',
				},
				{
					name: 'html2',
					content: 'html2',
				},
				{
					name: 'html3',
					content: 'html3',
				},
				{
					name: 'html4',
					content: 'html4',
				},
				{
					name: 'html4',
					content: 'html5',
				},
			],
		}
	},
	watch: {
		pagesEl(oldValue, newValue) {},
	},
	computed: {},
	methods: {
		preview() {
			let data = document.getElementById('designItem').innerHTML
			this.setStore('preview', data)
		},
		getWidth(item, item1) {
			let n = item.includes('%')
				? item.split('%')
				: item.includes('px')
				? item.split('px')
				: ''
			let p = item1.includes('%')
				? item1.split('%')
				: item1.includes('px')
				? item1.split('px')
				: ''
			let m = (parseInt(p[0]) / parseInt(n[0])) * 100
			n[0] = m
			n = item.includes('%')
				? n.join('%')
				: item1.includes('px')
				? n.join('px')
				: ''
			return n
		},
		designFlex(item, index1, index2, item2) {
			let a = true
			let b = true
			let val = {
				value: true,
				width: item2.width,
				height: item2.height,
			}
			if (item.merge) {
				//判断  是否合并行
				if (item.mergeData.copy) {
					//判断是否为 私复制项
					for (let i = 0; i < item.mergeData.num; i++) {
						//找合并行
						if (this.pagesEl[index1 + i].children[index2].merge) {
							//有和并行

							a = true
							if (
								this.pagesEl[index1 + i].children[index2]
									.mergeData.copyCol
							) {
								//是否是复制行
								b = true
							} else {
								val.width = this.getCal(
									this.pagesEl[index1 + i].children[index2]
										.width,
									item.mergeData.num
								)
								b = false
								break
							}
						}
					}

					val.value = a && b
					return val
				} else {
					//不是复制项
					for (let i = 0; i < item.mergeData.num; i++) {
						//找合并行
						if (this.pagesEl[index1 - i].copy) {
							let n = this.pagesEl[index1 - i]
							for (let k = 0; k < n.mergeData.num; k++) {
								//找合并行
								if (
									this.pagesEl[index1 - i + k].children[
										index2
									].merge
								) {
									//有和并行
									a = true
									if (
										this.pagesEl[index1 - i + k].children[
											index2
										].mergeData.copyCol
									) {
										//是否是复制行
										b = true
									} else {
										val.width = this.getCal(
											this.pagesEl[index1 - i + k]
												.children[index2].width,
											item.mergeData.num
										)
										b = false
										break
									}
								}
							}
						}
						val.value = a && b
						return val
					}
				}
			} else {
				aval.value = a && b
				return val
			}
		},
		getCal(item, num) {
			let n = item.includes('%')
				? item.split('%')
				: item.includes('px')
				? item.split('px')
				: ''
			let m = parseInt(num) * parseInt(n[0])
			n[0] = m
			n = item.includes('%')
				? n.join('%')
				: item1.includes('px')
				? n.join('px')
				: ''
			return n
		},
		getCol(val, index1, index2) {
			let item = this.pagesEl[index1].children[index2].width
			let item1 = val.width
			let n = item.includes('%')
				? item.split('%')
				: item.includes('px')
				? item.split('px')
				: ''
			let p = item1.includes('%')
				? item1.split('%')
				: item1.includes('px')
				? item.split('px')
				: ''
			let m = parseInt(Number(p[0]) / Number(n[0]))
			return m
		},
		colTest(item, index1, index2, item2) {
			let sWitch = true
			let val = {
				value: true,
				width: item2.width,
				height: item2.height,
				num: 1,
			}
			for (let i = 0; i < item.mergeData.num; i++) {
				this.pagesEl[index1 + i].children.forEach((e, index) => {
					if (e.merge && !e.mergeData.copyCol) {
						if (index2 == index) {
							val.value = false
						}
					}
				})
			}
			if (val) {
				for (let i = 0; i < item.mergeData.num; i++) {
					this.pagesEl[index1 + i].children.forEach((e, index) => {
						if (e.merge && e.mergeData.copyCol && sWitch) {
							if (index2 == index) {
								val.width = e.width
								val.height = e.height
								val.num = e.mergeData.num
								sWitch = false
							}
						}
					})
				}
			}
			return val
		},
		getData(row1, col1) {
			let row = []
			let col = []
			let data = []
			for (let i = 0; i < row1; i++) {
				row = {
					name: 'row',
					width: '100%',
					height: '20%',
					merge: false, //未合并
					mergeData: {
						num: 0,
						copy: false,
						copyCol: false,
						width: '100%',
						height: '20%',
						serial: function (e) {
							return e
						},
						save: [],
					},
					children: [],
					content: '1<div>1</div>',
				}
				if (i == 0) {
					row.merge = true
					row.height = '40%'
					row.mergeData.num = 2
					row.mergeData.copy = true
				}
				data.push(row)
				for (let j = 0; j < col1; j++) {
					col = {
						name: 'Col',
						width: '20%',
						height: '100%',
						merge: false, //未合并
						mergeData: {
							num: 0,
							copy: false,
							copyCol: false,
							width: '100%',
							height: '20%',
							serial: function (e) {
								return e
							},
							save: [],
						},
						content: '1',
					}
					if (j == 0) {
						col.mergeData.copy = true
					}
					col.content = i + '--' + j
					data[i].children.push(col)
				}
			}
			return data
		},
		merge() {
			let id = document.getElementById('designItem')
		},
		openClick(open) {
			if (this.cell.length == 1) {
				this[open] = true
			} else {
				this.$Message.warning('请选中唯一操作项!')
			}
		},
		changeVal(val) {
			//获取分割界面数组
			this.openSplit = val.modal
			if (val.form) {
				this.pagesEl = val.form
			}
		},
		changeVal1(val) {
			//获取杭高 列宽
			if (val.pattern == 'row') {
				this.openWh = val.modal
				if (val.form) {
					this.pagesEl[this.cell[0].index1].height = val.form.row
				}
			} else if (val.pattern == 'col') {
				this.openWh1 = val.modal
				if (val.form) {
					this.pagesEl.forEach((element, index) => {
						this.pagesEl[index].children[
							this.cell[0].index2
						].width = val.form.row
					})
				}
			}
		},
		addRow(item) {
			// 单点 添加行
			let data = []
			if (this[item].length > 1)
				this.$Message.warning('请选中或不选进行行操作!')
			if (this[item].length == 1) {
				data = JSON.parse(
					JSON.stringify(this.pagesEl[this[item][0].index1])
				)
				this.resetAtt(data)
				data.children.forEach((element, index) => {
					this.resetAtt(data.children[index])
				})
				this.pagesEl.splice(this[item][0].index1 + 1, 0, data)
			} else if (this[item].length < 1) {
				data = JSON.parse(JSON.stringify(this.pagesEl[0]))
				this.resetAtt(data)
				data.children.forEach((element, index) => {
					this.resetAtt(data.children[index])
				})
				this.pagesEl.unshift(data)
			}
		},
		resetAtt(data) {
			data.content = ''
			data.merge = false
			data.copy = false
			data.mergeData.width = ''
			data.mergeData.height = ''
		},
		clearChioce() {
			this.$refs.colItemChild.forEach((element, index) => {
				this.$refs.colItemChild[index].style.border = ''
			})
		},
		delRow(item) {
			if (this[item].length > 1)
				this.$Message.warning('请选中或不选进行行操作!')
			if (this[item].length == 1) {
				this.pagesEl.splice(this[item][0].index1, 1)
				this.designChioce = null //清空选中
				this.clearChioce()
				this[item] = [] //清空保存数组
			} else if (this[item].length < 1) {
				this.$Message.warning('请选中删除行!')
			}
		},
		addCol(item) {
			// 单点 添加列
			let data = []
			if (this[item].length > 1)
				this.$Message.warning('请选中或不选进行行列作!')
			if (this[item].length == 1) {
				data = JSON.parse(
					JSON.stringify(
						this.pagesEl[this[item][0].index1].children[
							this[item][0].index2
						]
					)
				)
				this.resetAtt(data)
				this.pagesEl.forEach((element, index) => {
					this.pagesEl[index].children.splice(
						this[item][0].index2 + 1,
						0,
						data
					)
				})
			} else if (this[item].length < 1) {
				data = JSON.parse(JSON.stringify(this.pagesEl[0].children[0]))
				this.resetAtt(data)
				this.pagesEl.forEach((element, index) => {
					this.pagesEl[index].children.splice(0, 0, data)
				})
			}
		},
		delCol(item) {
			if (this[item].length > 1)
				this.$Message.warning('请选中或不选进行行列作!')
			if (this[item].length == 1) {
				this.pagesEl.forEach((element, index) => {
					this.pagesEl[index].children.splice(this[item][0].index2, 1)
				})
				this.designChioce = null //清空选中
				this.clearChioce()
				this[item] = [] //清空保存数组
			} else if (this[item].length < 1) {
				this.$Message.warning('请选中删除列!')
			}
		},
		splitClick() {
      //拆分功能
      if(this.cell.length==1){
              let pagesEl = JSON.parse(JSON.stringify(this.pagesEl))
              let col = pagesEl[this.cell[0].index1].children[this.cell[0].index2]
              let row = pagesEl[this.cell[0].index1]
              let num = JSON.parse(JSON.stringify(row.mergeData.num))
              let num1 = JSON.parse(JSON.stringify(col.mergeData.num))
              let wh=pagesEl[this.cell[0].index1].children[this.cell[0].index2].mergeData.width;
              if (this.cell.length == 1) {
                if (col.merge) {
                  //alert('列拆分')             
                    for (let i = 0; i < num1; i++) {
                    pagesEl[this.cell[0].index1].children[this.cell[0].index2+i].merge=false;
                    pagesEl[this.cell[0].index1].children[this.cell[0].index2+i].mergeData.num=0;
                    pagesEl[this.cell[0].index1].children[this.cell[0].index2+i].width=wh;
                    pagesEl[this.cell[0].index1].children[this.cell[0].index2+i].mergeData.copyCol=false;
                    console.log(pagesEl[this.cell[0].index1].children[this.cell[0].index2+i])
                    }
                  this.$set(this,'pagesEl', pagesEl);
                  this.cell = [];
                } else if (row.merge) {
                  let ht=pagesEl[this.cell[0].index1].mergeData.height;
                  //alert('行拆分')
                  for (let i = 0; i < num; i++) {
                    pagesEl[this.cell[0].index1 + i].merge = false;
                    pagesEl[this.cell[0].index1 + i].copy = false;
                    pagesEl[this.cell[0].index1 + i].num = 0;
                    pagesEl[this.cell[0].index1 + i].mergeData.copy = false;
                    pagesEl[this.cell[0].index1 + i].mergeData.num = 0;
                    pagesEl[this.cell[0].index1 + i].height =ht;
                    pagesEl[this.cell[0].index1 + i].children[this.cell[0].index2].mergeData.copy = false;
                        console.log(pagesEl[this.cell[0].index1 + i])     
                  }
                  this.$set(this, 'pagesEl', pagesEl);
                  this.cell = [];
                }
              } else {
                this.$Message.warning('请选中唯一操作项!')
              }
        }else{
        this.$Message.warning('请选中唯一操作项!')
        }
		},
		mergeClick() {
			//合并功能
			//合并检测行列 暂时支持 2个合并     后续可能进一步支持多行列同步合并
			let pagesEl = JSON.parse(JSON.stringify(this.pagesEl))
			if (this.cell.length == 2) {
				let hack =
					(pagesEl[this.cell[0].index1].mergeData.copy &&
						pagesEl[this.cell[1].index1].mergeData.copyCol) |
					(pagesEl[this.cell[1].index1].mergeData.copyCol &&
						pagesEl[this.cell[0].index1].mergeData.copy)
				if (hack) {
					this.$Message.warning('请先拆分在合并!')
					return
				}
				if (this.cell[0].index1 == this.cell[1].index1) {
					// alert("合并列")
					//合并计数
					let num = 0

					if (
						pagesEl[this.cell[0].index1].children[
							this.cell[0].index2
						].mergeData.num
					) {
						num =
							pagesEl[this.cell[0].index1].children[
								this.cell[0].index2
							].mergeData.num
					} else {
						num = 1
					}
					if (
						pagesEl[this.cell[0].index1].children[
							this.cell[1].index2
						].mergeData.num
					) {
						num +=
							pagesEl[this.cell[0].index1].children[
								this.cell[1].index2
							].mergeData.num
					} else {
						num += 1
					}
					let index =
						this.cell[0].index2 < this.cell[1].index2
							? this.cell[0].index2
							: this.cell[1].index2 //最小优先
					let index1 =
						this.cell[0].index2 > this.cell[1].index2
							? this.cell[0].index2
							: this.cell[1].index2 //最大修改 重置
					let spliceNum =
						this.cell[0].index2 < this.cell[1].index2 ? 1 : 0 //最大删除数
					let data = pagesEl[this.cell[0].index1].children
					data[index].merge = true
					data[index1].merge = true
					data[index].mergeData.width = data[index].width //保存
					data[index].mergeData.height = data[index].height //保存
					data[index].width = this.splitTurn(data[index].width,	data[index1].width,num)
					data[index].mergeData.num = num
					data[index1].mergeData.num = num
					data[index].mergeData.copyCol = true
					data[index1].mergeData.copyCol = false
					this.$refs.colItemChild.forEach((element, index) => {
						this.$refs.colItemChild[index].style.border = ''
					})
					this.$forceUpdate()
					this.$set(this, 'pagesEl', pagesEl)
					this.cell = []
				} else if (this.cell[0].index2 == this.cell[1].index2) {
					let index =
						this.cell[0].index1 < this.cell[1].index1
							? this.cell[0].index1
							: this.cell[1].index1 //最小优先
					let index1 =
						this.cell[0].index1 > this.cell[1].index1
							? this.cell[0].index1
							: this.cell[1].index1 //最大修改 重置
					let spliceNum =
						this.cell[0].index1 < this.cell[1].index1 ? 1 : 0 //最大删除数
					let dg =
						!(
							(pagesEl[this.cell[0].index1].merge &&
								pagesEl[this.cell[1].index1].merge) |
							(!pagesEl[this.cell[0].index1].merge &&
								!pagesEl[this.cell[1].index1].merge)
						) &&
						(this.cell[1].index1 == this.cell[0].index1) |
							(pagesEl[this.cell[1].index1].merge !=
								pagesEl[this.cell[0].index1].merge &&
								pagesEl[this.cell[0].index1].mergeData.copy ==
									false &&
								pagesEl[this.cell[1].index1].mergeData.copy ==
									false)
					if (
						pagesEl[this.cell[0].index1].mergeData.copyCol |
						pagesEl[this.cell[1].index1].mergeData.copyCol
					) {
						this.$Message.warning('请先拆分在合并!')
						return
					}
					if (dg) {
						//判断合并列的是否
						this.$Message.warning('包含和并列,请先拆分在合并!')
						return
					}
					//  alert("合并行")

					//合并计数
					let num = 0
					if (
						pagesEl[this.cell[0].index1].merge &&
						pagesEl[this.cell[1].index1].merge
					) {
						num = pagesEl[this.cell[0].index1].mergeData.num
					} else {
						if (pagesEl[this.cell[0].index1].mergeData.num) {
							num = pagesEl[this.cell[0].index1].mergeData.num
						} else {
							num = 1
						}
						if (pagesEl[this.cell[1].index1].mergeData.num) {
							num += pagesEl[this.cell[1].index1].mergeData.num
						} else {
							num += 1
						}
					}
					pagesEl[index].mergeData.width = pagesEl[index].width
					pagesEl[index].mergeData.height = pagesEl[index].height
					if (!(pagesEl[index].merge && pagesEl[index1].merge)) {
						//判断是否计算高度
						pagesEl[index].height = this.splitTurn(
							pagesEl[index].height,
							pagesEl[index1].height,
							num
						)
					}
					pagesEl[index].mergeData.num = num
					pagesEl[index1].mergeData.num = num
					pagesEl[index].merge = true
					pagesEl[index1].merge = true
					pagesEl[index].mergeData.copy = true
					pagesEl[index1].mergeData.copy = false
					pagesEl[index].children[
						this.cell[0].index2
					].mergeData.copy = true
					// pagesEl[index].children.forEach((element,i)=>{
					//     pagesEl[index].children[i].sign=true
					// })
					//  pagesEl[index1].children.forEach((element,i)=>{
					//      pagesEl[index].children[i].sign=true
					// })
					this.$refs.colItemChild.forEach((element, index) => {
						this.$refs.colItemChild[index].style.border = ''
          })
          console.log(pagesEl)
					this.$forceUpdate()
					this.$set(this, 'pagesEl', pagesEl)
					this.cell = []
				} else {
					this.$Message.warning(
						'1请选择同行列相邻2个单元格并拆分后的单元进行合并!!'
					)
				}
			} else {
				this.$Message.warning(
					'2请选择同行列相邻2个单元格并拆分后的单元进行合并!!'
				)
			}
		},
		splitTurn(item, item1, num) {
			let n = item.includes('%')
				? item.split('%')
				: item.includes('px')
				? item.split('px')
				: ''
			let p = item1.includes('%')
				? item1.split('%')
				: item1.includes('px')
				? item.split('px')
				: ''
			let m = Number(n[0]) + Number(p[0])
			n[0] = m
			n = item.includes('%')
				? n.join('%')
				: item1.includes('px')
				? n.join('px')
				: ''
			return n
		},
		//点击选中
		choiceClick(item, index1, index2, e) {
			//  单选模式
			// if(this.designChioce==index1+'--'+index2){
			// this.designChioce=null;
			// this.cell=[];
			//   return
			// }
			// this.designChioce=index1+'--'+index2;
			// this.cell=[{target:item,index1:index1,index2:index2}]
			// 多选模式
			if (
				(e.target.style.border == '') |
				(e.target.style.border == 'underfined') |
				(e.target.style.border == null)
			) {
				e.target.style.border = '2px solid #2d8cf0'
				this.cell.push({ target: item, index1: index1, index2: index2 })
			} else {
				e.target.style.border = ''
				this.cell.forEach((element, index) => {
					if (index1 == element.index1 && index2 == element.index2) {
						this.cell.splice(index, 1)
					}
				})
			}
		},
		// 左侧拖拽
		_move(e, index1, index2) {
			this.setEl = { target: e, index1: index1, index2: index2 }
		},
		_mousedown(e, index1, index2, event) {
			this.position = 'left'
			this.getEl = { target: e, index1: index1, index2: index2 }
		},
		_mouseup(e, index1, index2, event) {
			if (this.position == 'right') {
				this.pagesEl[index1].children[
					index2
				].content = this.getEl.target
				return
			} else if (this.position == 'left') {
				if (!this.getEl) return
				if (!this.setEl) return
				this.pagesEl[this.getEl.index1].children[
					this.getEl.index2
				].content = this.setEl.target
				this.pagesEl[this.setEl.index1].children[
					this.setEl.index2
				].content = this.getEl.target
				return
			}
		},
		// 右侧拖拽
		_moveContent(e) {
			let el = e.target
		},
		_mouseDownContent(e) {
			this.getEl = { target: e, index1: null, index2: null }
			this.position = 'right'
		},
		_mouseUpContent(e) {},
		scrollHeightChange(
			val,
			item = 'scrollMain',
			ref1 = 'leftSplit',
			ref2 = 'contentScroll'
		) {
			//滚动条 出现 收起

			if (val == 1) {
				if (
					this.$refs[ref1].clientHeight >
					this.$refs[ref2].clientHeight
				)
					return //如果没有超出  滚动条不显示
				this[item] = false
			} else if (val == 2) {
				this[item] = true
			}
		},
	},
	created() {},
	mounted() {
		this.scrollHeight = this.$refs.leftSplit.clientHeight
		this.scrollHeight1 = this.$refs.designBoard.offsetHeight
		// this.$refs.designBoardMain.style.width=this.$refs.designBoard.clientWidth
		//this.pagesEl=this.getData(4,4)
	},
}
</script>
<style lang="less" scoped>
.wrapper {
	width: 100%;
}
.switchTitle {
	height: 50px;
}
.switchButton {
	margin-right: 16px;
}
.mainContent {
	border: 1px solid rgba(220, 222, 226, 1);
	width: 100%;
	height: calc(~'100% - 50px');
}
.mainContentUl {
	height: 100%;
	width: 100%;
	padding-left: 12px;
	border-bottom: 1px solid rgba(220, 222, 226, 1);
}
.mainContentTitle {
	list-style: none;
	height: 100%;
	float: left;
	display: flex;
	align-items: center;
	margin-right: 12px;
}
.mainContentUl1 {
	padding: 4px 0;
	margin: 0;
	height: auto;
}
.mainContentTitle1 {
	display: inline-block;
	width: 100%;
	height: auto;
	float: none;
	margin: 0;
	padding: 4px;
}
.mainContentTitle span {
	cursor: pointer;
	display: inline;
	padding: 4px;
}
.designBoard {
	width: 100%;
	height: calc(~'100% - 50px');
}
@import url('../ui-design/css/ui-design-board.css');
// @import url('./css/ui-design-board.css');
&/deep/ .ivu-scroll-content {
	height: 100%;
	width: 100%;
}
.ivScroll1 ::-webkit-scrollbar {
	display: none;
}
</style>